<template>
    <view class="relative">
        <!-- 公共组件-每个页面必须引入 -->
        <public-module></public-module>
        <wlk-navbar title="我的团队" fontColor="#FFFFFF" navbarType='5'></wlk-navbar>
        <view class="team-content relative pd30" :style="{background:bgColor}">
            <u-gap height="40"></u-gap>
            <view class="wlkflex justify-between">
                <view class="team-card bgw mt40 relative overHidden shadow">
                   <view class="team-num bold center">{{agentInfo.team_num||0}}</view>
                    <view class="title center mt10">团队总数(人)</view>
                    <u-divider :dashed="true"></u-divider>
                    <view class="wlkflex justify-around">
                        <view class="center">
                            <view class="title">一级成员(人)</view>
                            <view class="other-num mt10 bold">{{agentInfo.team_num_1||0}}</view>
                        </view>
                        <view class="center">
                            <view class="title">二级成员(人)</view>
                            <view class="other-num mt10 bold">{{agentInfo.team_num_2||0}}</view>
                        </view>
                    </view>
                    <view class="center agent mt30">
                        我的邀请人：{{agentInfo.my_agent}}
                    </view>
                    <view class="icon">
                        <uni-icons type="staff-filled"  color="#FFFFFF" size="30"></uni-icons>
                    </view>
                </view>
            </view>
        </view>
        <view>
            <view class="sub-box pd30 ">
                <view class="wlkflex justify-between mb20">
                    <view class="head-title">团队成员</view>
                    <view class="sub-item">
                        <u-subsection :list="subList" :current="curNow" :activeColor="themeColor" @change="sectionChange"></u-subsection>
                    </view>
                </view>
                <u-search shape="square" placeholder="搜索团队成员昵称、手机号" v-model="keyword" :showAction="false" @change="change" @search="search"></u-search>
            </view>

            <scroll-view class="team-list pd030" :style="{height:itemHeight}" scroll-y @scrolltolower="scrolltolower">
                <block v-if="loadStatus=='nomore' && teams.length==0">
                    <view class="not-data">
                        <u-empty
                                :icon="uEmpty.search"
                                text="没有搜索结果"
                        >
                        </u-empty>
                    </view>
                </block>
                <block v-else>
                    <view v-for="(team,index) in teams" class="wlkflex justify-between team-item mb30">
                        <view class="item-avatar">
                            <u-avatar :src="team.avatar"></u-avatar>
                        </view>
                        <view class="item-info">
                            <view class="wlkflex">
                                <view class="nickname bold">{{team.nickname}}</view>
                                <view class="level-info wlkflex  ml20">
                                    <view class="icon mr10">
                                        <image class="wd100 hg100" lazy-load :src="team.agentInfo?agentInfo.level_info.image:'/static/images/plugins/commission/level.png'"  mode="aspectFill"/>
                                    </view>
                                    <view>
                                        {{team.agentInfo?agentInfo.level_info.name:'普通会员'}}
                                    </view>
                                </view>
                            </view>
                            <view class="wlkflex mt05">
                                <text>加入时间：</text>
                                <text>{{$u.timeFormat(team.createtime,'yyyy/mm/dd')}}</text>
                            </view>
                        </view>
                        <view class="item-more">
                            <text class="ml15">团队{{team.childList.length}}人</text>
                        </view>
                    </view>
                    <view class="load-more">
                        <u-loadmore :status="loadStatus" :loading-text="loadingText"  :loadmore-text="loadmoreText" :nomore-text="nomoreText" dashed  line />
                    </view>
                </block>

            </scroll-view>
        </view>
        <view class="bg-icon">
            <image class="wd100 br04":src="images.texture"  mode="widthFix"/>
        </view>
    </view>
</template>
<script>
    var _self;
    import {rgbaToRgb,toUrl} from '@/wlkutils/tools';
    import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
    export default {
        computed: {
            ...mapGetters(['userInfo','themeColor','isLogin','images','uEmpty'])

        },
        data() {
            return {
                bgColor:'',
                agentInfo:{},
                teams:[],
                itemHeight:'',
                systemInfo : uni.getSystemInfoSync(),
                page: 1,
                loadStatus:'loading',
                loadingText: '努力加载中',
                loadmoreText: '轻轻上拉',
                nomoreText: '实在没有了',
                subList:['一级', '二级'],
                curNow: 0,
                keyword:''
            };
        },
        onLoad() {
            _self = this;
            this.bgColor = ' linear-gradient(to bottom,'+this.themeColor+' ,'+ uni.$u.colorToRgba('#FFFFFF', 0.01)+')';
            this.itemHeight =  uni.$u.addUnit(this.systemInfo.windowHeight*0.55, 'px');
            this.getData();
        },
        onShow() {

        },
        watch:{
            isLogin(val) {
                if(val){
                    _self.getData();
                }
            },
            themeColor(val) {
                this.bgColor = ' linear-gradient(to bottom,'+val+' ,'+ uni.$u.colorToRgba(rgbaToRgb('#FFFFFF'), 0.01)+')';
            }
        },
        methods: {
            scrolltolower() {
                if(this.loadStatus == "nomore"){
                    return;
                }
                this.page++;
                this.getData();
            },
            getData(){
                uni.$u.http.post('commission/getTeam', {
                    page: this.page,
                    level:this.curNow,
                    keyword:this.keyword
                }).then(res => {
                    console.log(res)
                    this.agentInfo = res.data.agentInfo;
                    if (res && res.data && res.data.teams) {
                        this.teams = this.teams.concat(res.data.teams);
                    }
                    this.loadStatus = res.data.teams.length < res.data.limit ? 'nomore' : 'loadmore';
                }).catch(res => {
                })

            },
            jump(path){
                toUrl(path);
            },
            change(){
              if(uni.$u.test.isEmpty(this.keyword)){
                  this.init();
              }
            },
            search(){
                this.init();
            },
            sectionChange(index) {
                this.curNow = index;
                this.init();
            },
            init(){
                this.loadStatus = 'loading';
                this.page = 1;
                this.teams = [];
                this.getData();
            }

        }
    }
</script>
<style lang="scss">
   page{
       background-color: #FFFFFF;
       .team-content{
           /* #ifdef MP-WEIXIN */
           padding-top: 120rpx;
           /* #endif */
           /* #ifdef H5 */
           padding-top: 50rpx;
           /* #endif */
           .team-card{
               width: 95%;
               height: 390rpx;
               margin: 0 auto;
               border-radius: 20px;
               background-image: radial-gradient(circle at 13% 47%, rgba(140, 140, 140,0.03) 0%, rgba(140, 140, 140,0.03) 25%,transparent 25%, transparent 100%),radial-gradient(circle at 28% 63%, rgba(143, 143, 143,0.03) 0%, rgba(143, 143, 143,0.03) 16%,transparent 16%, transparent 100%),radial-gradient(circle at 81% 56%, rgba(65, 65, 65,0.03) 0%, rgba(65, 65, 65,0.03) 12%,transparent 12%, transparent 100%),radial-gradient(circle at 26% 48%, rgba(60, 60, 60,0.03) 0%, rgba(60, 60, 60,0.03) 6%,transparent 6%, transparent 100%),radial-gradient(circle at 97% 17%, rgba(150, 150, 150,0.03) 0%, rgba(150, 150, 150,0.03) 56%,transparent 56%, transparent 100%),radial-gradient(circle at 50% 100%, rgba(25, 25, 25,0.03) 0%, rgba(25, 25, 25,0.03) 36%,transparent 36%, transparent 100%),radial-gradient(circle at 55% 52%, rgba(69, 69, 69,0.03) 0%, rgba(69, 69, 69,0.03) 6%,transparent 6%, transparent 100%),linear-gradient(90deg, rgb(255,255,255),rgb(255,255,255));
               padding: 35rpx 35rpx;
              .team-num{
                  font-size: $font-macro;
              }
              .title{
                  font-size: $font-base;
                  color: $uni-text-color-grey;
              }
               .other-num{
                   font-size: $font-max;
               }
               .agent{
                   font-size: $font-base;
                   color: $uni-text-color-grey;
               }
               .icon{
                   background: linear-gradient(to left bottom, #ffae86, #ff7d67);
                   padding: 10rpx 30rpx;
                   border-radius: 20px 0 20px 4px;
                   overflow: hidden;
                   display: flex;
                   align-items: center;
                   position: absolute;
                   bottom: 0;
                   right: 0;
                   box-shadow: -8px 3px 0 #F6E8E5;
               }
           }
       }
       .sub-box{
           background-color: #FFFFFF;
           height: 110px;
           .head-title{
               font-size: $font-lg;
               font-weight: bold;
           }
           .sub-item{
               width: 30%;
           }
       }

       .team-list{
           height: 70%;
           background-color: white;
           .team-item{
               .item-avatar{
                   width: 15%;
               }
               .item-info{
                   width: 55%;
                   font-size: $font-sm;
                   color: $uni-text-color-grey;
                   .nickname{
                       font-size: $font-lt;
                       color: $uni-text-color;
                   }
                   .level-info{
                       padding-right: 15rpx;
                       border-radius: 40rpx;
                       font-size: $font-sm;
                       color: white;
                       background-color: rgba(0, 0, 0, 0.3);
                       .icon{
                           padding: 5rpx;
                           background-color: white;
                           width: 35rpx;
                           height: 35rpx;
                           border-radius: 50%;
                           overflow: hidden;
                       }
                   }
               }
               .item-more{
                   width: 30%;
                   font-size: $font-sm;
                   color: $uni-text-color-grey;
                   text-align: right;
               }
           }
       }
       .bg-icon{
           position: absolute;
           top: -220rpx;
           right: -220rpx;
           z-index: 99;
           width: 100%;
           height: 700rpx;
           opacity: .1;
           overflow: hidden;
       }

   }
</style>
